$bg_color:#ebeff2;
$color:#98a6ad;
$hover:#71b6f9;
.login{
    height:100vh;
    display: flex;
    align-items:center;
    justify-content: center;
    background:url('../img/login_bg.jpg') no-repeat center;
    background-size:100% 100%;
    .login_box{
        width:500;
        height:450px;
        border-radius: 20px;
        border:1px solid #444;
        background-color:rgba(255,255,255,0.2);
        .title{
            font-size: 30px;
            font-weight: 500;
        }
    }
};
/* 主界面 */
.top{
    height:70px;
    border-top:3px solid #71b6f9;
    >.fl{
        width:250px;
        background:#fff;
        text-align: center;
        line-height: 70px;
        a{
            text-decoration: none;
            color: #188ae2 !important;
            font-size: 32px;
            font-family: 'Rancho', cursive;
        }
    }
    >.fr{
        padding:0 20px;
        width:calc(100vw - 250px);
        height:70px;
        line-height:70px;
        background: $bg_color;
        font-size: 20px;
    }
    .breadcrumb {
        padding:0;
    }
    .breadcrumb li::after{
        content:'/';
        padding: 0 10px;
    }
    .breadcrumb li:last-child::after{
        content:'';
    }
}
#main_page .content{
    background: $bg_color;
    .nav{
        width:250px;
        height:calc(100vh - 73px);
        background: #fff;
        position: fixed;
        left: 0;
        top:73px;
    }
    .user{
        width:100%;
        max-height: 200px;
        padding:30px 0;
        .portrait{
            padding:8px;
            width:80px;
            height:80px;
            border:1px solid #ccc;
            border-radius: 100%;
            margin:0 auto;
            img{
                width:100%;
                height:100%;
                border-radius: 100%;
                overflow: hidden;
            }
        }
        .user_name{
            text-align: center;
            color: $color;
            line-height:25px;
        }
        .setUse{
            text-align: center;
            i{
                margin:5px 10px;
            }
        }
    }
    .navbox{
        width:100%;
        min-height:calc(100% - 200px);
        .open{ 
            >a{
                border-left:5px solid $hover;
                color:$hover;
            }
            .active a{
                color:$hover;
            }
        }
        
        a{
            text-decoration: none;
            color:$color;
            &:hover{
                color:$hover;
            }
        }
        li .list_name{
            display: block;
            margin:4px 0;
            padding:12px 20px;
        }
        li .list_name i:first-child{
            margin:0 20px 0 10px;
        }
        li li{
            padding:10px 20px 10px 65px;
        }
    }
    #cont{
        width:calc(100vw - 291px);
        min-height:calc(100vh - 83px);     
        margin:10px 20px 0;
        background:#fff;
    }
}
